import { useForecastWeather } from "../../hooks/useForecastWeather";

import Loading from "../../ui/Loading";
import AppNav from "./AppNav";
import ForecastList from "./ForecastList";

import type { SetIsHome } from "../../types/state";
import type { Position } from "../../types/position";

function Forecast({
  setIsHome,
  position,
}: { setIsHome: SetIsHome, position: Position }) {
  const { weatherForecastList, isLoading } = useForecastWeather(position);

  return (
    <>
      {isLoading && <Loading />}
      {!isLoading && (
        <>
          <AppNav setIsHome={setIsHome} />

          <ForecastList weatherForecastList={weatherForecastList} />
        </>
      )}
    </>
  );
}
export default Forecast;
